/// <reference path="_variables-shared.scss" />
/// <reference path="_mixins.scss" />
/// <reference path="../lib/bs4/scss/bootstrap.scss" />
/// <reference path="../lib/rfs/_rfs.scss" />



// Returns a CSS clamp function which resolves to $min-view-width 
// when page width is below $min-size, $size-at-max-width when 
// page width is above $max-size, and linearly scales between the 
// two between $min-width and $max-size
// --------------------------------------------------------------

@function clamp-calc($min-width, $max-width, $size-at-min-width, $size-at-max-width) {
    $slope: ($size-at-max-width - $size-at-min-width) / ($max-width - $min-width);
    $y-axis-intersection: -1 * $min-width * $slope + $size-at-min-width;
    $return-value: clamp(#{$size-at-min-width}, #{$y-axis-intersection} + #{$slope} * 100vw, #{$size-at-max-width});
    @return $return-value;
}


// Font Sizes
// ==============================================================

@if ($enable-rfs) {
    // Overwrite original sizes only if RFS is enabled to reduce class cluttering
    h1, .h1 {
        @include font-size($h1-font-size);
        //font-size: clamp-calc(1rem, 75rem, 1.25rem, $h1-font-size);
    }

    h2, .h2 {
        @include font-size($h2-font-size);
        //font-size: clamp-calc(1rem, 75rem, 1.25rem, $h2-font-size);
    }

    h3, .h3 {
        @include font-size($h3-font-size);
    }

    h4, .h4 {
        @include font-size($h4-font-size);
    }

    .display-1 {
        @include font-size($display1-size);
    }

    .display-2 {
        @include font-size($display2-size);
    }

    .display-3 {
        @include font-size($display3-size);
    }

    .display-4 {
        @include font-size($display4-size);
    }
}

.fs-h1          { @include font-size($h1-font-size !important); }
.fs-h2          { @include font-size($h2-font-size !important); }
.fs-h3          { @include font-size($h3-font-size !important); }
.fs-h4          { @include font-size($h4-font-size !important); }
.fs-h5          { font-size: $h5-font-size !important; }
.fs-h6          { font-size: $h6-font-size !important; }

.fs-display-1   { @include font-size($display1-size !important); }
.fs-display-2   { @include font-size($display2-size !important); }
.fs-display-3   { @include font-size($display3-size !important); }
.fs-display-4   { @include font-size($display4-size !important); }

.fs-lead        { font-size: $lead-font-size; }

.fs-sm, 
.fs-sm a        { font-size: $font-size-sm !important; }
.fs-xs,
.fs-xs a        { font-size: $font-size-xs !important; }

@include media-breakpoint-only(xs) {
    .rfs {
        font-size: 14px;
    } 
}

@include media-breakpoint-only(sm) {
    .rfs {
        font-size: 15px;
    } 
}

@include media-breakpoint-down(md) {
    .rfs {
        word-break: break-word;
    } 
}

// Font weight Helpers
// ======================================

h1, .h1, h2, .h2 {
    font-weight: $headings-lg-font-weight;
}

h6, .h6 {
	font-weight: $headings-sm-font-weight;
}

@each $weight, $var in (unset, 100, 200, 300, 400, 500, 600, 700, 800, 900) {
    .font-weight-#{$weight} {
        font-weight: $weight !important;
    }
}

.font-weight-medium, .fwm {
    font-weight: $font-weight-medium !important;
}

.fwb { @extend .font-weight-bold; }
.fwn { @extend .font-weight-normal; }
.fwl { @extend .font-weight-light; }


// Heading & Title
// ======================================

.heading {
    position: relative;

    &:before {
        position: absolute;
        display: block;
        content: ' ';
        width: 100%;
        height: 1px;
        top: 50%;
        z-index: 0;
        background: radial-gradient(ellipse at left, $body-bg 25%, rgba(#000, 0.25) 100%);
    }

    .heading-title {
        position: relative;
        display: inline-block;
        background: var(--body-bg, #fff);
        padding-right: 1rem;
        font-weight: $font-weight-normal;
    }
}

.heading-center {
    text-align: center;

    &:before {
        background: radial-gradient(ellipse at center, $body-bg 25%, rgba(#000, 0.25) 100%) !important;
    }

    .heading-title {
        padding-left: 1rem;
    }
}

.page-title {
    margin-bottom: 1.5rem;
}

// Bidi
// ======================================

.rlm:after {
	content: '\200F';
}

.ltr {
	direction: ltr;
	unicode-bidi: isolate;
}

.rtl {
	direction: rtl;
	unicode-bidi: isolate;
}


// Long text
// ======================================

.long-text {
    font-size: 1rem;

    @include media-breakpoint-up(lg) {
        font-size: 1.0625rem;
        line-height: 1.75rem;
        letter-spacing: .015625rem;
    }

    h2, h3, h4 {
        font-weight: $font-weight-bold;
    }

    h5, h6 {
        font-weight: $font-weight-medium;
    }

    h2:not(:first-of-type) {
        @include margin-top(4rem);
    }

    h2 {
        @include font-size($h3-font-size);
        @include margin-bottom(2rem);
    }

    h3 {
        font-size: $h4-font-size;
        @include margin-top(3rem);
        margin-bottom: 1.5rem;
    }

    h4, h5, h6 {
        font-size: inherit;
        @include margin-top(2rem);
    }

    h3, h6 {
        color: $gray-700;
    }
}


// Misc typo stuff
// ======================================

a.color-body {
    $clr: lighten($body-color, 10%);
    color: $clr;
    text-decoration: none;

    &:hover {
        color: $clr;
        text-decoration: underline;
    }
}

a.pretty-link {
    color: $body-color;
    text-decoration: none;
    font-weight: $font-weight-medium;

    > i { padding-right: 1.2rem; }
    > span {
        color: #aaa;
        &:hover, &:active { color: inherit; }
    }
}

.text-wrap {
    white-space: normal !important;
}

code {
    background-color: rgba(0,0,0, 0.03);
    border-radius: 2px; 
}

.html-editor-content {
	margin-bottom: 1.5rem;
}